{{layout "login"}}
{{favicon "images/favicon.png" type="image/png"}}
{{title "Login | " @config.appName}}
{{fragment "org.wso2.carbon.uuf.common.foundation.ui.noty"}}
{{fragment "authManager"}}
{{css "css/login.css"}}
{{js "js/login.js"}}
{{#fillZone "content"}}
    {{#if errorMessage}}
        <div class="alert alert-danger" role="alert">
            <i class="icon fw fw-error"></i><strong>Login Error!</strong>
            {{errorMessage}}
            <button type="button" class="close" aria-label="close" data-dismiss="alert">
                <span aria-hidden="true">
                    <i class="fw fw-cancel"></i>
                </span>
            </button>
        </div>
    {{/if}}
    <div class="page-content-wrapper">
        <div class="container">
            <div class="login-form-wrapper">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
                        <div class="brand-container add-margin-bottom-5x">
                            <div class="row">
                                <div class="col-xs-6 col-sm-3 col-md-9 col-lg-9 center-block float-remove-sm
                                float-remove-xs pull-right-md pull-right-lg">
                                    <img class="img-responsive brand-spacer" src="{{public "images/logo-white.png"}}"
                                         alt="wso2-logo">
                                </div>
                            </div>
                            <!--<h2 class="text-center-sm text-center-xs text-center-md text-right">{{!--{{@config.appName}}--}}</h2>-->
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 login">
                        <div class="data-container">
                            <form class="form-horizontal" method="post" id="loginForm">
                                <h3>Sign in to your account</h3>
                                <div class="form-group">
                                    <div class="col-xs-12 col-sm-12 col-md-5 col-lg-5">
                                        <div class="input-group input-wrap">
                                            <input type="text" class="form-control" id="username" name="username"
                                                   placeholder="Username">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-xs-12 col-sm-12 col-md-5 col-lg-5">
                                        <div class="input-group input-wrap">
                                            <input type="password" class="form-control" id="password" name="password"
                                                   placeholder="Password">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-xs-12 col-sm-12 col-md-5 col-lg-5">
                                        <button type="button" id="loginButton"  class="btn btn-default btn-primary add-margin-right-2x">
                                            Sign In
                                        </button>
                                    </div>
                                </div>
                                <a href=""
                                   class="add-margin-bottom-5x remove-margin-lg remove-margin-md">Forgot
                                    Password</a>
                                <p class="hidden-xs hidden-sm">Don't have an account? <a
                                        href="">Register Now</a></p>
                            </form>
                        </div>
                        <p class="visible-xs visible-sm add-margin-2x text-center">Don't have an account? <a href="#">
                            Register Now</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
{{/fillZone}}
